<template>
  <div>
    <h4>用户信息</h4>
    <el-card style='width: 100%; height: 100%;'>
      <el-row>
        <el-col :span='4'>
          <div style='width: 150px; height: 100%;'>
            <el-image style='width: 100%;' :src='userInfo.HEADIMG'></el-image>
          </div>
        </el-col>
        <el-col :span='20'>
          <div style='width: 100%; height: 100%;'>
            <el-descriptions>
              <el-descriptions-item label='姓名'>{{ userInfo.NAME }}</el-descriptions-item>
              <el-descriptions-item label='人才编号'>{{ userInfo.ELITE_NUMBER }}</el-descriptions-item>
              <el-descriptions-item label='电话'>{{ userInfo.PHONE }}</el-descriptions-item>
              <el-descriptions-item label='邮箱'>{{ userInfo.EMAIL }}</el-descriptions-item>
              <el-descriptions-item label='申请的职位'>{{ userInfo.DELIVERY }}</el-descriptions-item>
              <el-descriptions-item label='面试邀请'>{{ userInfo.INTERVIEW_NUMBER }}</el-descriptions-item>
            </el-descriptions>
            <el-button type='danger' size='small' @click='refreshResume'>刷新简历</el-button>
            <el-button type='danger' size='small' @click='editResume'>编辑简历</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-row type="flex" justify="space-between" class="underline">
      <span class="color"><b>岗位推荐</b></span>
      <span @click="goMore" class="liPointer">更多<i class="el-icon-d-arrow-right"></i></span>
    </el-row>

    <el-row>
      <el-col :span='12' v-if='index < maxnum' v-for='(item, index) in postsList' :key='item.ID'
              style='padding-left: 5px; padding-top: 15px;'>
        <el-card :body-style="{ padding: '0px'}" class='box-card' shadow='hover'>
          <el-row>

            <el-col :span='12'>
              <div class='grid-content bg-purple' style='padding: 15px;'>
                <div>
                  <el-popover
                    placement='right'
                    width='400'
                    trigger='hover'>
                    <p style='padding-left: 170px;'>岗位详情</p>
                    <el-descriptions class='margin-top' :column='1'>
                      <el-descriptions-item label='招聘岗位'>{{ item.TITLE }}</el-descriptions-item>
                      <el-descriptions-item label='薪酬待遇'>{{ item.WAGES || '面议' }}</el-descriptions-item>
                      <el-descriptions-item label='职位类别'>{{ item.COMPANY || '-' }}</el-descriptions-item>
                      <el-descriptions-item label='学历要求'>{{ educationTransformation(item.EDUCATION) }}</el-descriptions-item>
                      <el-descriptions-item label='企业名称'>{{ item.COMPANY || '-' }}</el-descriptions-item>
                      <el-descriptions-item label='行业性质'>{{ item.HNAME || item.NAME || '-' }}</el-descriptions-item>
                      <el-descriptions-item label='工作地址'>{{ item.ADDRESS || '-' }}</el-descriptions-item>
                    </el-descriptions>
                    <el-link :underline='false' slot='reference'>
                      <a class='target' href='' target='_blank'></a>
                      <span @click='textButton(item.posts_id)' style='font-size: 16px;'
                            class='aatable-content'>{{ item.TITLE }}</span>
                    </el-link>
                  </el-popover>
                </div>

                <div>
                  <div class='grid-content bg-purple-light' style='padding-top: 25px;'>
                    <el-tag size='small'>{{ educationTransformation(item.EDUCATION) }}</el-tag>
                  </div>
                </div>

                <div style='padding-top: 17px;'>
                  <el-row style='display: flex; justify-content: center; align-items: center;'>
                    <el-col :span='5'>
                      <div class='grid-content bg-purple aatable-content'>
                        <el-avatar :src=item.LOGO></el-avatar>
                      </div>
                    </el-col>
                    <el-col :span='19'>
                      <div class='grid-content bg-purple-light'>
                        <span style='font-size: 16px;' class='aatable-content'>{{ item.COMPANY || '暂无，待更新' }}</span>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>


            <el-col :span='12'>
              <div class='grid-content bg-purple' style='padding: 15px;'>

                <div class='grid-content bg-purple-light'>
                  <span style='float: right; color: #e03939' class='aatable-content'>{{ item.WAGES || '面议' }}</span>
                </div>

                <div class='grid-content bg-purple-light' style='padding-top: 50px;'>
                  <div style='float: right;' class='aatable-content'>{{ item.ADDRESS || '暂无，待更新' }}</div>
                </div>

                <div style='padding-top: 50px;'>
                  <el-row style='display: flex; justify-content: center; align-items: center;'>
                    <el-col :span='24'>
                      <div class='grid-content bg-purple'>
                        <span style='float: right; color: #000000' class='aatable-content'>{{ item.HNAME || item.NAME }}</span>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from 'axios'
import { getUserInfo , refreshResume } from '../api/api'

export default {
  // props:{
  //   NUID: String,
  //   required: true
  // }
  //
  // ,
  components: {},
  name: 'notice',
  data() {
    return {
      maxnum: 10,
      userInfo: {},
      postsList: []
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    educationTransformation(education) {
      if (isNaN(parseFloat(education))) {
        return education
      } else {
        switch (education) {
          case '1':
            return '初中'
          case '2':
            return '高中'
          case '3':
            return '中专'
          case '4':
            return '大专'
          case '5':
            return '本科'
          case '6':
            return '研究生'
          case '7':
            return '其他'
          case '0':
            return '不限'
        }
      }
    },
    getUserInfo() {
      const data = {
        UID: localStorage.getItem('UID')
      }
      getUserInfo(data)
        .then(res => {
          if (res.code == 200) {
            //返回的用户的基本信息
            this.userInfo = res.data
            //岗位推荐信息
            this.postsList = res.data.postsList
          }
        })
    },

    textButton(postsId) {
      this.$router.push({
        path: '/home/postDetails',
        query: {
          title: 'postDetails',
          id: postsId
        }
      })
    },

    refreshResume() {
      refreshResume().then(res => {
          if (res.code == 200) {
            this.$message.success('已刷新简历到最新的时间')
          }
      })
    },

    editResume() {
      this.$router.push({
        path: '/home/myResume',
        query: {
          title: 'myResume',
          id: 3
        }
      })
    },

    goMore() {
      this.$router.push({
        path: '/home/positionRecommendation',
        query: {
          title: 'myResume',
          id: 3
        }
      })
    }
  }
}
</script>
<style lang='less' scoped>
.underline {
  border-bottom: 1px solid rgb(1, 72, 153);
  padding-top: 20px;

}

.lieBiao {
  width: 100%;
  height: 55px;
  background: rgb(241, 241, 241);
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  margin-bottom: 10px;
}

.time {
  width: 100px;
  padding: 17px 0px;
  display: flex;
  flex-direction: column;
  background-color: rgb(1, 72, 153);
  color: white;
  text-align: center;
}

.title {
  width: 500px;
  height: 50px;
  overflow: hidden;
  line-height: 50px;
  // background-color: rgb(179, 19, 19);
  padding: 0 0 0 10px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 545px;
  height: 150px;
}

.aatable-content {

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 1;

}
</style>
